<script setup lang="ts">
import { ref, onMounted, PropType, computed } from "vue";
import { ListType } from "@/types/pages/cart";
import { refundCancel, pay } from "@/api/user";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  list: {
    type: Array as PropType<ListType[]>,
    default: () => [],
  },
  type: {
    type: Number,
    default: 1,
  },
});
// const totalTransfee = computed(() => {
// 	return props.list.shopCartOrders.map(item=> {
// 		return item.transfee+1
// 	})
// })
onMounted(() => {
  console.log(props.list);
  // console.log('wahhahahah', totalTransfee.value);
});
const detailFn = (val: ListType) => {
  uni.navigateTo({
    url: "/pages/commodity/detail?id=" + val.prodId,
  });
};
const emit = defineEmits(["cancelRefund"]);
// 取消退款
const refundFn = async (item: any) => {
  const res = await refundCancel([item.id]);
  if (res.code == 0) {
    // 重新获取订单详情
    emit("cancelRefund");
    uni.$u.toast("Cancel the refund successfully");
  }
};
</script>

<template>
  <view>
    <block v-if="type == 1">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="shop">
          <image
            style="width: 16px"
            mode="widthFix"
            src="../../static/image/store01.png"
          ></image>
          {{ item.shopName }}
        </view>

        <view
          v-for="(item2, index2) in item.shopCartItemDiscounts"
          :key="index2"
        >
          <view
            class=""
            v-for="(item3, index3) in item2.shopCartItems"
            :key="index3"
          >
            <view class="cont">
              <img :src="item3.pic" />
              <view class="right">
                <view class="name">
                  <span>
                    {{ item3.prodName }}
                  </span>
                  <span class="price">{{ $amountFormat(item3.amount) }}</span>
                </view>
                <view class="desc">{{ item3.skuProperties }}</view>
                <view class="num">
                  <span>x{{ item3.prodNum }}</span>
                  <slot name="itemButton"></slot>
                </view>
              </view>
            </view>
            <slot name="bottomText" :row="item3"></slot>
          </view>
        </view>
      </view>
      <slot name="totalText"></slot>
    </block>
    <block v-if="type == 2">
      <slot name="itemShopName"></slot>
      <view
        class="item"
        @click="detailFn(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="cont">
          <img :src="item.pic" />
          <view class="right">
            <view class="name">
              <span>
                {{ item.prodName }}
              </span>
              <span class="price">{{ $amountFormat(item.amount) }}</span>
            </view>
            <view class="desc">{{ item.properties }}</view>
            <view class="num">
              <span>x{{ item.num }}</span>
              <slot name="itemButton"></slot>
            </view>
            <view class="refund" v-if="item.orderRefund">
              <fui-button
                v-if="item.orderRefund.processState == 0"
                background="#FFFFFF"
                borderColor="$subject-color"
                color="$subject-color"
                @click="refundFn(item)"
                size="28"
                height="50rpx"
                min-width="140rpx"
                style="padding: 0 10rpx"
                >{{ t("order.cancelRefund") }}
              </fui-button>
              <view v-else>{{
                item.orderRefund.state == 1 ? "Refunded" : "Refund failure"
              }}</view>
            </view>
          </view>
        </view>

        <slot name="bottomText" :row="item"></slot>
      </view>
      <slot name="totalText"></slot>
    </block>
  </view>
</template>

<style lang="scss" scoped>
.item {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;

  .shop {
    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0px;

    font-feature-settings: "kern" on;
    /* 主题色 */
    color: #303030;

    image {
      margin-right: 5px;
    }
  }

  .cont {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    img {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      margin-right: 10px;
      object-fit: cover;
    }

    .right {
      width: calc(100% - 70px);
      position: relative;

      .refund {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    .name {
      span {
        font-size: 14px;
        font-weight: normal;
        line-height: 15px;
        letter-spacing: 0px;

        /* 主题色 */
        color: #303030;
      }

      .price {
        font-size: 15px;
        font-weight: 600;
        line-height: 14px;
        letter-spacing: 0px;

        /* 外部/Black font */
        color: #303030;
      }
    }

    .name,
    .num {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .desc,
    .num {
      margin-top: 10px;

      font-size: 13px;
      font-weight: normal;
      line-height: 15px;
      letter-spacing: 0px;

      /* 副色系 */
      color: $vice-subject-color;
    }
  }
}
</style>
